<template>
  <div class="disCell_select">
    <span class="inner">{{ isBoolean ? (value === true ? "是" : value === false ? "否" : "") : comVal }}</span>
    <span class="suffix">
      <i class="el-icon-arrow-down"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "InputDisSelect",
  props: {
    value: {},
    isBoolean: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    comVal() {
      return Array.isArray(this.value) ? this.value.join("、") : this.value;
    },
  },
};
</script>

<style lang="scss" scoped>
.disCell_select {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 0 0 0.75rem;
  overflow: hidden;
  font-size: 14px;
  line-height: 32px;
  border: 1px solid #bac3d3;
  border-radius: 4px;

  & > span.inner {
    flex: 1;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
  }

  & > span.prefix,
  & > span.suffix {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    color: #c0c4cc;
  }
}
</style>
